<template>
	<view class="container">

		<view class="main">
			<view class="item">
				<view class="order-status">
					<image src="@/static/myOrder/order_icon03.png" mode="aspectFill"></image>
					<view class="status-text">
						已完成
					</view>
				</view>
				<view class="order-price">
					使用2小时8分钟
				</view>
			</view>
			<view class="line"></view>
			<view class="item">
				<view>
					订单号:
				</view>
				<view class="info">
					<view class="copy">
						复制
					</view>
					284015085476
				</view>
			</view>
			<view class="item">
				<view>
					租借地点:
				</view>
				<view>
					深圳北站1号站台
				</view>
			</view>
			<view class="item">
				<view>
					租借时间:
				</view>
				<view>
					2021-05-19 16:32:16
				</view>
			</view>
			<view class="item">
				<view>
					归还地点:
				</view>
				<view>
					易站（HALO广场店）
				</view>
			</view>
			<view class="item">
				<view>
					归还时间:
				</view>
				<view>
					2021-05-19 23:32:16
				</view>
			</view>
			<view class="line"></view>
			<view class="item">
				<view class="money">
					支付金额
					<image @click="showTips = !showTips" src="@/static/orderDetails/details_icon.png" mode="aspectFill"></image>
				</view>
				<view>
					￥7.9
				</view>
			</view>
			<view class="tips" v-show="showTips">
				前5分钟内免费；超出即按每60分钟2元计费，不足60分钟按60分钟计算；每24小时30元封顶，总封顶99元
			</view>
			<view class="item">
				<view>
					支付方式:
				</view>
				<view>
					微信支付
				</view>
			</view>
			<view class="heji">合计 ￥7.9</view>
		</view>

		<view class="maixia">不想还了，99元买下充电宝</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	let showTips = ref(false)
</script>

<style lang="scss">
	page {
		background-color: #f4f6f9;
	}
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f6f9;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.main {
			width: 720rpx;
			padding: 20rpx;
			background-color: #FFF;
			border-radius: 14rpx;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		
		
			.item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				color: #6c6c6c;
				margin-bottom: 10rpx;
		
				.order-status {
					display: flex;
					align-items: center;
		
					image {
						width: 22rpx;
						height: 24rpx;
					}
		
					.status-text {
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #3fc477;
					}
				}
		
				.order-price {
					font-size: 28rpx;
					color: #000;
				}
		
				.info {
					display: flex;
					align-items: center;
		
					.copy {
						border-radius: 10rpx;
						border: solid 2rpx #6d6d6d;
						font-size: 22rpx;
						margin-right: 15rpx;
						color: #333333;
						padding: 4rpx 10rpx;
					}
				}
		
				.money {
					display: flex;
					align-items: center;
		
					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 5rpx;
					}
				}
			}
		
			.line {
				width: 100%;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.06);
				margin: 15rpx 0;
			}
		
			.tips {
				width: 100%;
				background-color: #e0e2e5;
				border-radius: 10rpx;
				font-size: 10px;
				color: #696969;
				padding: 10rpx;
			}
		
			.heji {
				width: 100%;
				text-align: right;
				font-size: 14px;
				margin-top: 20rpx;
			}
		}
		
		.maixia {
			width: 662rpx;
			height: 96rpx;
			background-image: linear-gradient(#0482fc 0%, #05acff 90%);
			border-radius: 48rpx;
			margin-top: 33rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 17px;
			letter-spacing: 2rpx;
			color: #ffffff;
		}
	}
</style>